{% extends "base.html" %}

{% block content %}
<style>
/* 勤工中心页面样式 */
.job-center-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.page-header {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
}

.page-header h2 {
    color: #2c3e50;
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.page-header .text-muted {
    color: #6c757d !important;
    font-size: 1.1rem;
}

/* 岗位卡片样式 */
.job-card {
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.job-card .card-body {
    padding: 2rem;
    position: relative;
}

.job-card .card-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

.job-title {
    color: #2c3e50;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.job-wage {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.job-info {
    margin-bottom: 1rem;
}

.job-info .info-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.job-info .info-content {
    color: #6c757d;
    line-height: 1.6;
}

.apply-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: white;
}

.applied-btn {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    color: white;
    cursor: not-allowed;
}

/* 文件上传模态框样式 */
.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
}

.modal-title {
    font-weight: 600;
}

.file-upload-area {
    border: 2px dashed #667eea;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    background: rgba(102, 126, 234, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: #764ba2;
    background: rgba(118, 75, 162, 0.1);
}

.file-upload-area.dragover {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}

.upload-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.upload-text {
    color: #495057;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.upload-hint {
    color: #6c757d;
    font-size: 0.9rem;
}

.file-info {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid #28a745;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
    display: none;
}

.file-name {
    color: #28a745;
    font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .job-center-container {
        padding: 1rem 0;
    }
    
    .page-header {
        padding: 1.5rem;
    }
    
    .job-card .card-body {
        padding: 1.5rem;
    }
    
    .job-title {
        font-size: 1.3rem;
    }
}
</style>

<div class="job-center-container">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <h2><i class="fas fa-briefcase me-3"></i>勤工中心</h2>
                    <p class="text-muted">发现适合您的校园勤工岗位</p>
                </div>
            </div>
        </div>

        <div class="row" id="jobList">
            <!-- 岗位卡片将通过JavaScript动态加载 -->
        </div>
    </div>
</div>

<!-- 简历上传模态框 -->
<div class="modal fade" id="resumeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-file-upload me-2"></i>投递简历</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6 id="modalJobTitle" class="text-primary"></h6>
                    <p id="modalJobLocation" class="text-muted"></p>
                </div>
                
                <form id="resumeForm" enctype="multipart/form-data">
                    <input type="hidden" id="jobId" name="job_id">
                    
                    <div class="file-upload-area" id="fileUploadArea">
                        <i class="fas fa-cloud-upload-alt upload-icon"></i>
                        <div class="upload-text">点击或拖拽上传简历</div>
                        <div class="upload-hint">支持 .doc, .docx 格式，最大 10MB</div>
                        <input type="file" id="resumeFile" name="resume" accept=".doc,.docx" style="display: none;">
                    </div>
                    
                    <div class="file-info" id="fileInfo">
                        <i class="fas fa-file-word text-success me-2"></i>
                        <span class="file-name" id="fileName"></span>
                        <button type="button" class="btn btn-sm btn-outline-danger ms-2" id="removeFile">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitResume" disabled>
                    <i class="fas fa-paper-plane me-2"></i>投递简历
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// 页面加载时获取岗位列表
document.addEventListener('DOMContentLoaded', function() {
    loadJobs();
    initFileUpload();
});

// 加载岗位列表
function loadJobs() {
    fetch('/api/jobs')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络请求失败');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                displayJobs(data.jobs);
            } else {
                showAlert('加载岗位失败：' + (data.error || data.message || '未知错误'), 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('网络错误，请稍后重试', 'danger');
        });
}

// 显示岗位列表
function displayJobs(jobs) {
    const jobList = document.getElementById('jobList');
    jobList.innerHTML = '';
    
    if (jobs.length === 0) {
        jobList.innerHTML = `
            <div class="col-12">
                <div class="text-center text-muted py-5">
                    <i class="fas fa-briefcase fa-3x mb-3"></i>
                    <h5>暂无岗位信息</h5>
                    <p>请稍后再来查看</p>
                </div>
            </div>
        `;
        return;
    }
    
    jobs.forEach(job => {
        const jobCard = createJobCard(job);
        jobList.appendChild(jobCard);
    });
}

// 创建岗位卡片
function createJobCard(job) {
    const col = document.createElement('div');
    col.className = 'col-lg-6 col-xl-4';
    
    const appliedStatus = job.has_applied ? 'applied-btn' : 'apply-btn';
    const buttonText = job.has_applied ? '已投递' : '投递简历';
    const buttonDisabled = job.has_applied ? 'disabled' : '';
    
    col.innerHTML = `
        <div class="card job-card">
            <div class="card-body">
                <h5 class="job-title">${job.job_title}</h5>
                <div class="job-wage">¥${job.hourly_wage}/小时</div>
                
                <div class="job-info">
                    <div class="info-label"><i class="fas fa-map-marker-alt me-2"></i>工作地点</div>
                    <div class="info-content">${job.work_location}</div>
                </div>
                
                <div class="job-info">
                    <div class="info-label"><i class="fas fa-tasks me-2"></i>岗位描述</div>
                    <div class="info-content">${job.job_description}</div>
                </div>
                
                <div class="job-info">
                    <div class="info-label"><i class="fas fa-clipboard-list me-2"></i>工作要求</div>
                    <div class="info-content">${job.work_requirements}</div>
                </div>
                
                <div class="job-info">
                    <div class="info-label"><i class="fas fa-phone me-2"></i>联系方式</div>
                    <div class="info-content">${job.contact_info}</div>
                </div>
                
                <div class="text-center mt-3">
                    <button class="btn ${appliedStatus}" 
                            onclick="openResumeModal(${job.id}, '${job.job_title}', '${job.work_location}')"
                            ${buttonDisabled}>
                        <i class="fas ${job.has_applied ? 'fa-check' : 'fa-paper-plane'} me-2"></i>
                        ${buttonText}
                    </button>
                </div>
            </div>
        </div>
    `;
    
    return col;
}

// 打开简历上传模态框
function openResumeModal(jobId, jobTitle, jobLocation) {
    if (document.querySelector(`button[onclick*="${jobId}"]`).disabled) {
        return;
    }
    
    document.getElementById('jobId').value = jobId;
    document.getElementById('modalJobTitle').textContent = jobTitle;
    document.getElementById('modalJobLocation').textContent = jobLocation;
    
    // 重置表单
    document.getElementById('resumeForm').reset();
    document.getElementById('fileInfo').style.display = 'none';
    document.getElementById('submitResume').disabled = true;
    
    const modal = new bootstrap.Modal(document.getElementById('resumeModal'));
    modal.show();
}

// 初始化文件上传
function initFileUpload() {
    const fileUploadArea = document.getElementById('fileUploadArea');
    const fileInput = document.getElementById('resumeFile');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const removeFileBtn = document.getElementById('removeFile');
    const submitBtn = document.getElementById('submitResume');
    
    // 点击上传区域
    fileUploadArea.addEventListener('click', () => {
        fileInput.click();
    });
    
    // 文件选择
    fileInput.addEventListener('change', handleFileSelect);
    
    // 拖拽上传
    fileUploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        fileUploadArea.classList.add('dragover');
    });
    
    fileUploadArea.addEventListener('dragleave', () => {
        fileUploadArea.classList.remove('dragover');
    });
    
    fileUploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        fileUploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect();
        }
    });
    
    // 移除文件
    removeFileBtn.addEventListener('click', () => {
        fileInput.value = '';
        fileInfo.style.display = 'none';
        submitBtn.disabled = true;
    });
    
    // 提交简历
    submitBtn.addEventListener('click', submitResume);
}

// 处理文件选择
function handleFileSelect() {
    const fileInput = document.getElementById('resumeFile');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const submitBtn = document.getElementById('submitResume');
    
    if (fileInput.files.length > 0) {
        const file = fileInput.files[0];
        
        // 验证文件类型
        if (!file.name.match(/\.(doc|docx)$/i)) {
            showAlert('请选择 Word 文档格式的文件', 'warning');
            fileInput.value = '';
            return;
        }
        
        // 验证文件大小（10MB）
        if (file.size > 10 * 1024 * 1024) {
            showAlert('文件大小不能超过 10MB', 'warning');
            fileInput.value = '';
            return;
        }
        
        fileName.textContent = file.name;
        fileInfo.style.display = 'block';
        submitBtn.disabled = false;
    }
}

// 提交简历
function submitResume() {
    const form = document.getElementById('resumeForm');
    const formData = new FormData(form);
    const submitBtn = document.getElementById('submitResume');
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>上传中...';
    
    fetch('/api/apply_job', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (response.status === 413) {
            return response.json().then(data => {
                throw new Error(data.error || '文件过大');
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showAlert('简历投递成功！', 'success');
            bootstrap.Modal.getInstance(document.getElementById('resumeModal')).hide();
            loadJobs(); // 重新加载岗位列表
        } else {
            showAlert('投递失败：' + (data.error || data.message || '未知错误'), 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('上传失败：' + error.message, 'danger');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>投递简历';
    });
}

// 显示提示信息
function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // 3秒后自动消失
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 3000);
}
</script>

{% endblock %}